<template>
    <section class="course-detail">
        <div class="loadingBg" v-if="showLoading">
            <div class="loading">
                <img src="../assets/image/loading.gif" />
            </div>
        </div>
        <div v-else-if="code==0">
            <div class="topImg">
                <img :src=images alt="">
            </div>
            <div class="course-cont">
                <h3>{{courseCont.lessonTopic}}</h3>
                <p class="teacherName">{{courseCont.teacherName}}</p>
                <div class="lineBox"></div>
                <div class="artical-cont" v-html="courseCont.content"></div>
            </div>
            <downLoad :hasShare="hasShare"></downLoad>
        </div>
        <div class="noCont" v-else>
            <img src="../assets/image/no_content.png">
            <span>资讯不存在</span>
        </div>
    </section>
</template>

<script>
import api from "../api";
import {toast} from "../toast";
import downLoad from "./../components/common/download/downLoad.vue";

export default {
	components: {
		downLoad
	},
    data(){
        return{
            courseCont:{},
            images:'',
			hasShare: true,
			appId: "wx921f8ebbe6ced2c2",
			wxSharePic:
                "https://static.shengxue985.com/oss/20180830/e5089c21aa9249e0bd121f7a7e21b582.png",
            showLoading: true,
            code:0
        }
    },
    filters:{
        titleNum: function(title){
            if(title.length>33){
                return title=title.slice(0,33)+'...'
            }else{
                return title
            }
        }
    },
	created() {
		this.getReportResult();
		this.getTopImg();
		this.secondShare(true, {
			url: window.location.href,
			appId: this.appId // 必填，公众号的唯一标识
		});
    },
	methods: {
        getTopImg(){

        },
        getReportResult() {
            // const res = json
			const params = {
				// mobile: "",
				id: this.$route.query.id
            };
            this.showLoading=true;

			api
				.getCourseDetail(params)
				.then(res => {
                    this.code=res.data.code;
					if (res.data.code == 0) {
                        this.showLoading=false;
                        this.courseCont = res.data.data.lessonsVOList[0];
                        this.images = res.data.data.commodityInfoByCidVO.pics[0]
					}else{
                        this.showLoading=false;
                        toast(res.data.message)
                    }
				})
				.catch(err => {
                    this.showLoading=false;
					toast(err);
                });
                
        },

		//跳转下载页面
		downLoad() {
            window.location = "http://a.app.qq.com/o/simple.jsp?pkgname=com.sx985.am";
		},
       	// 二次分享
		secondShare(hasData, params) {
			api
				.getSecondShareKey(params)
				.then(res => {
					if (res.data.code == 0) {
						let data = res.data.data;
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: data.appId, // 必填，公众号的唯一标识
							timestamp: data.timestamp, // 必填，生成签名的时间戳
							nonceStr: data.nonceStr, // 必填，生成签名的随机串
							signature: data.signature, // 必填，签名，见附录1
							jsApiList: [
								"chooseImage",
								"previewImage",
								"uploadImage",
								"downloadImage",
								"checkJsApi",
								"onMenuShareTimeline",
								"onMenuShareAppMessage",
								"onMenuShareQQ",
								"onMenuShareWeibo"
							] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						});
						this.wxShare(hasData, {
							title: this.courseCont.title || "邀您查看话题详情", // 分享标题
							desc: this.courseCont.content || "升学在线,学习超给力", // 分享描述
							link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: this.wxSharePic, // 分享图标
							type: "", // 分享类型,music、video或link，不填默认为link
							dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
							success: function() {
								// 用户确认分享后执行的回调函数
							},
							cancel: function() {
								// 用户取消分享后执行的回调函数
							}
						});
					} else {
					}
				})
				.catch(err => {
				});
		},
		wxShare(hasData, config) {
			let c;
			if (!hasData) {
				c = {};
				c.title = "邀您查看话题详情";
				c.desc = "升学在线,学习超给力";
				(c.link = window.location.href), (c.imgUrl = this.wxSharePic);
			} else {
				c = config;
			}
			if (location.hash == "#debug") {
				toast(JSON.stringify(c));
			}
			wx.ready(function() {
				wx.onMenuShareAppMessage(c);
				wx.onMenuShareTimeline(c);
				wx.onMenuShareQQ(c);
				wx.onMenuShareWeibo(c);
			});
        }, 
        //跳转广告页面
        advertisingGo(adUrl) {
            window.location = adUrl;
		} 
    }
}
</script>

<style lang="scss">
@import "../styles/mixin.scss";
.course-detail{
    width: px2rem(720);
	margin: 0 auto;
	background: #f4f5f7;
    overflow: hidden;
    .watch {
        background: url('../assets/image/parentHeadline/newWatch.png') no-repeat
            center left;
        background-size: px2rem(32) px2rem(32);
    }
    .topImg{
        width: 100%;
        height: 200px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .course-cont{
        background: #fff;
        white-space:normal; 
        word-break:break-all;
        h3 {
            padding: 0 px2rem(30);
            font-size: px2rem(30);
            // line-height: px2rem(60);
            color: #333333;
            font-weight: bold;
            padding-top: px2rem(30);
            padding-bottom: px2rem(10);
        }
        .lineBox{
            height: px2rem(15);
            background-color: #eee;
        }
        .teacherName{
            color: #666666;
            font-size: px2rem(25);
            padding: 0 px2rem(30) px2rem(30);
        }
        .artical-cont{
            padding-top: px2rem(10);
            font-size: px2rem(30);
            overflow: hidden;
            img{
                width: 100%;
            }
        }

    }


    .loadingBg{
        background: #fff;
        position: fixed;
        height: 100%;
        width: 100%;
        z-index: 999
    }
    .loading{
        width: px2rem(200);
        height: px2rem(200);
        display: block;
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 9999;
        margin-left: px2rem(-100);
        margin-top: px2rem(-100);
        background-size: 10% 10%;
        img{
            width: 100%
        }
    }
    .noCont{
        height: 300px;
        background: #fff;
        padding-top: px2rem(100);
        text-align: center;
        span{
            display: block;
            text-align: center;
            font-size: px2rem(30)
        }
        img{
            width: 50%;
        }
    }
}
</style>
